<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-900 to-purple-900">
    <header class="bg-black bg-opacity-50 text-white p-4 shadow-lg">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-3xl font-bold text-amber-400">
          <span class="text-blue-300">原神：</span>
          重生提瓦特之我是系统
        </h1>
        <nav class="flex space-x-6">
          <router-link 
            to="/" 
            class="px-4 py-2 rounded-lg hover:bg-blue-700 transition"
            active-class="bg-blue-600"
          >
            首页
          </router-link>
          <router-link 
            to="/npc" 
            class="px-4 py-2 rounded-lg hover:bg-purple-700 transition"
            active-class="bg-purple-600"
          >
            NPC模式
          </router-link>
          <router-link 
            to="/system" 
            class="px-4 py-2 rounded-lg hover:bg-green-700 transition"
            active-class="bg-green-600"
          >
            系统模式
          </router-link>
        </nav>
      </div>
    </header>

    <main class="container mx-auto p-4">
      <RouterView />
    </main>

    <footer class="bg-black bg-opacity-50 text-white p-4 mt-8">
      <div class="container mx-auto text-center">
        <p>© 2025 提瓦特大陆 - 米哈游风格游戏系统</p>
      </div>
    </footer>
  </div>
</template>
